<template>
    <div>
        <div ref="container" class="container"></div>
        <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
        <el-dialog
            title="个人信息"
            :visible.sync="dialogVisible"
            width="400px">
            <div style="margin-bottom:10px;">姓名: 孟祥东</div>
            <div style="margin-bottom:10px;">出生日期: 2001-01-19</div>
            <div style="margin-bottom:10px;">毕业时间: 2023-06</div>
            <div>地址: 河北省邢台市沙河市华冶新村</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    export default {
        name: 'Map',
        data(){
            return{
                //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
                //map:null,
                dialogVisible: false
            } 
        },
        methods:{
            one(){
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(114.506972,36.86994),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: '华冶新村'
                });
                
                this.map.add(marker);
                marker.on('click', ()=> this.dialogVisible = true );
            },
            initMap(){
                AMapLoader.load({
                    key:"3e469963d7c081d18f24e6a0d3138bae",             // 申请好的Web端开发者Key，首次调用 load 时必填
                    version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap)=>{
                    this.map = new AMap.Map(this.$refs.container,{  //设置地图容器id
                        viewMode:"3D",    //是否为3D地图模式
                        pitch: 45,
                        zoom: 10,           //初始化地图级别
                        center:[114.506972,36.86994], //初始化地图中心点位置
                    });
                    this.one()
                }).catch(e=>{
                    console.log(e);
                })
            }
        },
        mounted(){
            //DOM初始化完成进行地图初始化
            this.initMap();
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
        height: calc(100vh - 100px);
    }
</style>